<template>
  <div class="task-manager">
    <div class="select">
      <div class="title">过滤类型</div>
      <div class="button-group">
        <div
          :class="{ active: currectIndex == '' }"
          class="button-item"
          @click="buttonTap('')"
        >
          全部
        </div>
        <div
          :class="{ active: currectIndex == 1 }"
          class="button-item"
          @click="buttonTap(1)"
        >
          首检
        </div>
        <!-- <div :class="{ active: currectIndex == 2 }" class="button-item" @click="buttonTap(2)">巡检</div> -->
        <div
          :class="{ active: currectIndex == 2 }"
          class="button-item"
          @click="buttonTap(2)"
        >
          终检
        </div>
      </div>
    </div>
    <div class="date">
      <div class="title">日期选择</div>
      <el-date-picker
        clearable
        style="width: 320px; height: 40px; font-size: 18px"
        v-model="date"
        type="date"
        placeholder="请选择"
        value-format="YYYY-MM-DD HH:mm:ss"
        @change="dateChange"
      />
    </div>
    <div class="person-view">
      <div class="title">生产人员</div>
      <el-select
        clearable
        v-model="person"
        filterable
        @change="personChange"
        placeholder="请选择"
        style="width: 240px; font-size: 18px"
      >
        <el-option
          v-for="item in operatorList"
          :key="item.userId"
          :label="item.userName"
          :value="item.userName"
        />
      </el-select>
    </div>
  </div>
</template>

<script setup>
import { ref } from "vue";
import { listOperatorListApi } from "@/api/login";

const emit = defineEmits(["statusSelect", "dateSelect", "personSelect"]);

const date = ref("");
const person = ref("");
// 当前选中的下标
const currectIndex = ref("");
/** 按钮点击 */
const buttonTap = (index) => {
  if (currectIndex.value === index) return;
  currectIndex.value = index;
  emit("statusSelect", currectIndex.value);
};

/** 日期选择 */
const dateChange = (date) => {
  // 日期分割
  if (date && date != null) {
    let arr = date.split(" ");
    emit("dateSelect", {
      start: arr[0] + " " + "00:00:00",
      end: arr[0] + " " + "23:59:59",
    });
  } else {
    emit("dateSelect", null);
  }
};

/** 人员选择 */
const personChange = (name) => {
  emit("personSelect", name);
};

// 生产人员列表
const operatorList = ref([]);
/** 获取生产人员列表 */
const getPersonList = async () => {
  const res = await listOperatorListApi();
  operatorList.value = res.data;
};
getPersonList();
</script>

<style lang="scss" scoped>
.task-manager {
  width: 100%;
  height: 100%;
  background-color: transparent;
  display: flex;
  align-items: center;
  justify-content: space-around;
  .select {
    display: flex;
    align-items: center;
  }
}
.button-group {
  display: flex;
  .button-item:nth-child(-n + 2) {
    border-right: 1px #ccc solid;
  }
  .button-item {
    width: 100px;
    height: 40px;
    background-color: white;
    color: #333;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
  }
  .active {
    background-color: orange;
    color: white;
  }
}
.date {
  display: flex;
  align-items: center;
}
.person-view {
  display: flex;
  align-items: center;
  :deep(.el-select__wrapper) {
    min-height: 40px;
    font-size: 18px;
  }
}
.title {
  margin-right: 10px;
  font-size: 20px;
  font-weight: bold;
}
</style>
